<template>
  <div class="permission-container">
    <div class="app-container">
      <!-- 表格 -->
      <el-card>
        <div style="text-align: right; margin-bottom: 20px">
          <el-button type="primary" size="small" @click="addJurisdiction(1,'0')">添加权限</el-button>
          <!-- 传参 (自己 是几级 ,是pid ) -->
        </div>
        <el-table border :data="list" row-key="id">
          <el-table-column label="名称" prop="name" />
          <el-table-column label="标识" prop="code" />
          <el-table-column label="描述" prop="description" />
          <el-table-column label="操作">
            <template #default="{row}">
              <!-- 添加一个权限判定 二级没有添加子权限 用 v-if 判定 type等于2 就不渲染 -->
              <el-button v-if="row.type===1" size="small" type="text" @click="addJurisdiction(2,row.id)">添加权限点</el-button>
              <el-button size="small" type="text" @click="editLookUpdate(row.id)">查看</el-button>
              <el-button size="small" type="text" @click="delJurisdiction(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <!-- 新增编辑的弹层 -->
      <el-dialog :visible="showDialog" :title="showTitle" @close="handleClose">
        <!-- 表单内容 -->
        <el-form label-width="100px">
          <el-form-item label="权限名称">
            <el-input v-model="formData.name" />
          </el-form-item>
          <el-form-item label="权限标识">
            <el-input v-model="formData.code" />
          </el-form-item>
          <el-form-item label="权限描述">
            <el-input v-model="formData.description" />
          </el-form-item>
          <el-form-item label="权限启用">
            <el-switch
              v-model="formData.enVisible"
              active-text="启用"
              active-value="1"
              inactive-text="不启用"
              inactive-value="0"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
            <!--
              active-text="启用"  文本
              active-value="1"    的是值可以自由转换
              inactive-text="不启用"
              inactive-value="0"
             -->
          </el-form-item>
        </el-form>

        <template #footer>
          <div style="text-align: right;">
            <el-button @click="handleClose ">取消</el-button>
            <el-button type="primary" @click="clickSubmit">确定</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { reqGetPermissionList, reqAddPermission, reqDelPermission, reqGetPermissionDetail, reqUpdatePermission } from '@/api/permission'
import { translistToTree } from '@/utils'
// import permission from '@/router/modules/permission'
export default {
  name: 'PermisSion',
  data() {
    return {
      list: [],
      showDialog: false,
      formData: {
        enVisible: '0', // 启用禁用, 0禁用, 1启用 inactive-value="0" 刚好配套绑定 如果不对 还可以修改
        name: '', // 名称
        code: '', // 权限标识
        description: '', // 描述
        type: '', // 类型标记了一级(页面访问权) 二级(按钮操作权)
        pid: '' // 添加到哪个节点下
      }
    }
  },
  computed: {
    showTitle() {
      return this.formData.id ? '编辑权限' : '新增权限'
    }
  },
  created() {
    // console.log(111)
    this.GetPermissionList()
  },
  methods: {
    // 获取权限列表
    async GetPermissionList() {
      const { data } = await reqGetPermissionList()
      // console.log(data)递归转树渲染
      this.list = translistToTree(data, '0')
      // console.log(this.list)
    },
    // 关闭
    handleClose() {
      this.showDialog = false
      // 重置表单 没有正则  所以 不用reset
      this.formData = {
        enVisible: '0', // 启用禁用, 0禁用, 1启用 inactive-value="0" 刚好配套绑定 如果不对 还可以修改
        name: '', // 名称
        code: '', // 权限标识
        description: '', // 描述
        type: '', // 类型标记了一级(页面访问权) 二级(按钮操作权)
        pid: '' // 添加到哪个节点下
      }
    },
    // 添加权限
    addJurisdiction(type, pid) {
      console.log(type, pid)
      // 打开弹出框
      this.showDialog = true
      // 赋值type 从事件传过来
      this.formData.type = type
      // 赋值 id
      this.formData.pid = pid
      // console.log(this.type, this.type)
    },
    async clickSubmit() {
      // 判定 权限 和权限标识不为空
      if (this.formData.name === '' || this.formData.code === '') return this.$message.warning('表示或权限不可为空')
      console.log(this.formData)
      // 由于 新增 和 编辑 共用一个 弹窗
      if (this.formData.id) {
        const res = await reqUpdatePermission(this.formData)
        console.log(res)
        this.$message.success('编辑权限成功')
      } else {
        const res = await reqAddPermission(this.formData)
        console.log(res)
        this.$message.success('添加权限成功')
      }

      // 关闭
      this.handleClose()
      // 重置表单
      this.GetPermissionList()
    },
    // 删除当前权限
    async  delJurisdiction(id) {
      // 删除前的提示
      const result = await this.$confirm('确认删除?').catch(err => err)
      console.log('删除', result, id)
      if (result !== 'confirm') return
      await reqDelPermission(id)
      // 提示
      this.$message.success('删除成功 !!!')
    },
    async editLookUpdate(id) {
      // 回显 查看
      const { data } = await reqGetPermissionDetail(id)
      console.log(data)
      this.formData = data
      // 共用一个  弹窗  判定id 判断 新增 还是编辑
      // 弹窗的 名字根据 点击的 不同改变名字 用 是否 有 id 判定  \
      // 打开弹窗
      this.showDialog = true
    }
    // 查看 修改功能

  }
}
</script>

<style>

</style>
